<template>
<div>
    <div style="height:100px;width:100%;background-color:#00b7ea">
        <div style="height: 80px; width:80%;margin:auto;padding-top:10px">
            <h1 style="color: #ffffff;">541导航</h1>
            <ul id="nav" style="float: right;">
                <li><el-button size='mini' @click="ping(option.url)">重新测速</el-button></li>
                <li><el-button size='mini' @click="goto()">回到首页</el-button></li>
            </ul>
        </div>
    </div>

    <div style="width: 80%;margin:auto;margin-top:30px">
        <h1 style="color:#666666"><span style="color:#03a9f4">{{option.messsage}}</span>线路选择</h1>
        <div id="lins">
            <div class="line_nav">
                <p style="width:30%">登录端口</p>
                <p style="width: 40%;">测速网址（点击网址进入)</p>
                <p style="width: 20%;">速度 （越小表示越快）</p>
            </div>
            <div class="line_nav" v-for='(a,index) in option.url' :key="index">
                <p style="width:30%" v-text='a.port'></p>
                <p style="width: 40%;"><a :href="a.url" v-text="a.url"></a></p>
                <p>{{option.url[index].yc}}ms</p>
            </div>
        </div>
    </div>
</div>
</template>


<script>
export default {
    data(){
        return{
             option:'',
        }
    },
    methods:{
        goto(){
            window.location.href = '/';
        },
        //获取延迟
        ping(data){
            for(let a in data){
                pin(data[a]);
            }


            async function pin(ip){
                let img = new Image();
                let start=new Date().getTime();
                let starts;
                let flag = false;
                let isCloseWifi = true;
                let hasFinish = false;
                img.onload = function() {
                    if ( !hasFinish ) {
                        flag = true;
                        hasFinish = true;
                        console.log('Ping ' + ip.url + ' 成功. ');
                        // alert("成功"+ip);
                        starts = new Date().getTime();
                        console.log(starts-start)/8;
                        ip.yc=(starts-start);
                    }
                };
                img.onerror = function() {
                    if ( !hasFinish ) {
                        if ( !isCloseWifi ) {
                            flag = true;
                            starts = new Date().getTime();
                            ip.yc=((starts-start)/8).toFixed(0);
                        } else {
                            console.log('network is not working!');
                        }
                        hasFinish = true;
                    }
                };
                setTimeout(function(){
                    isCloseWifi = false;
                    start = new Date().getTime();
                    // alert("开始测试"+ip.url);

                },2);
                img.src = ip.url;
                var timer = setTimeout(function() {
                    if ( !flag ) {
                        hasFinish = true;
                        flag = false ;
                        // console.log('Ping ' + ip.url + ' fail. ');
                        // alert("失败"+ip);
                    }
                }, 3000);
            }
        },
        getcode(id){
            this.$axios.post(this.$API.GETCODE,{
                id:id
            }).then(res=>{
                // console.log(res);
                if(res.code==200){
                    this.option=res.data;
                    this.ping(res.data.url);
                }else{
                    alert('数据获取失败');
                }
            });
        }
    },
    created(){
        // console.log(this.$route.params.id);
        //获取安全码详细信息
        this.getcode(this.$route.params.id);
    }
}
</script>


<style scoped>

#nav li{
    display: inline-block;
    width: 100px;
}


.line_nav{
    margin-top:20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #dcdcdc;
    height: 30px;
}

.line_nav p{
    display: inline-block;
    padding: 0 10px;
    color:#666666
}

#lins{
    margin-top: 30px;
    border-radius: 10px;
    border:1px solid #dcdcdc;
    padding:10px;
}


</style>